<template>
  <div class="page-layout">
    <f-form-layout
      @ValidateFailed="onValidateFailed"
      class="mb20"
      ref="form"
      layout="inline"
      :model="model"
      :columns="columns">
    </f-form-layout>

    <!-- 重置model到初始状态 -->
  </div>
  <f-button type="primary" @click="handleForm" class="mr10">Submit</f-button>
  <f-button type="primary" @click="resetForm" class="mr10">Reset</f-button>
  <f-button type="primary" @click="setSub" class="mr10">set value</f-button>
  <f-button type="primary" @click="addColumns" class="mr10">add columns</f-button>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const form = ref();
const model = ref({});
const columns = ref([
  {
    rules: [{ required: true, message: '您好' }],
    field: 'field3',
    span: 6,
    label: '12312321321312',
    type: 'select',
    props: {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项1', value: '、2' },
        { label: '选项1', value: '、21' },
        { label: '选项1', value: '、22' },
        { label: '选项1', value: '、23' },
        { label: '选项1', value: '、24' },
        { label: '选项1', value: '、25' },
        { label: '选项1', value: '、26' },
        { label: '选项1', value: '、27' },
        { label: '选项1', value: '、28' },
        { label: '选项1', value: '、29' },
        { label: '选项1', value: '、200' }
      ]
    }
  },
  {
    type: 'custom-form',
    field: '01'
  }
]);

const addColumns = () => {
  const key = columns.value.length.toString();
  columns.value = [...columns.value, {
    type: 'custom-form',
    field: key,
    props: { value: '01' } as any
  }];
  model.value[key] = null;
};

function onValidateFailed(e) {
  console.error('errors:', e);
}
watch(
  model,
  (v) => {
    console.log({ ...v });
  },
  { deep: true }
);
function submit(data) {
  console.log(data);
  console.log(form.value?.getExistFieldsValue());
}
async function handleForm() {
  const value = await form.value?.validate();
  console.log(value);
}
function resetForm() {
  form.value.resetFields();
}
function setSub() {
  model.value = {
    // '01': '1',
    select: '1',
    number: '1',
    '01': { sub1: '宿便' }
  };
}
</script>

<style lang="scss">
body {
  background: #f5f5f5;
}
.page-layout {
  background: #f5f5f5;
  .formlayout-group {
    background: #ffffff;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
  }
}
</style>
